{% extends "base.html" %}

{% block title %}新建分类 - 提示词管理系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">
                    <i class="bi bi-plus-circle"></i> 新建分类
                </h4>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="name" class="form-label">分类名称 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" required 
                               placeholder="请输入分类名称" maxlength="50">
                        <div class="form-text">分类名称不能为空，最多50个字符</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">分类描述</label>
                        <textarea class="form-control" id="description" name="description" rows="3" 
                                  placeholder="请输入分类描述（可选）" maxlength="200"></textarea>
                        <div class="form-text">最多200个字符</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="color" class="form-label">分类颜色</label>
                        <div class="d-flex align-items-center">
                            <input type="color" class="form-control form-control-color" id="color" name="color" 
                                   value="#6c757d" title="选择分类颜色">
                            <span class="ms-2 text-muted">选择一个代表性颜色</span>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('categories') }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> 返回
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> 创建分类
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 表单验证
document.querySelector('form').addEventListener('submit', function(e) {
    const name = document.getElementById('name').value.trim();
    if (!name) {
        e.preventDefault();
        alert('请输入分类名称');
        document.getElementById('name').focus();
        return false;
    }
});

// 实时字符计数
document.getElementById('name').addEventListener('input', function() {
    const maxLength = 50;
    const currentLength = this.value.length;
    const formText = this.nextElementSibling;
    formText.textContent = `分类名称不能为空，最多50个字符 (${currentLength}/${maxLength})`;
    
    if (currentLength > maxLength * 0.8) {
        formText.className = 'form-text text-warning';
    } else {
        formText.className = 'form-text';
    }
});

document.getElementById('description').addEventListener('input', function() {
    const maxLength = 200;
    const currentLength = this.value.length;
    const formText = this.nextElementSibling;
    formText.textContent = `最多200个字符 (${currentLength}/${maxLength})`;
    
    if (currentLength > maxLength * 0.8) {
        formText.className = 'form-text text-warning';
    } else {
        formText.className = 'form-text';
    }
});
</script>
{% endblock %}